<div ng-controller="ProductCtrl" ng-init="addAction()" class="sui-form form-horizontal">
    <form name="productForm" novalidate ng-submit="productAdd()">
        <ul class="sui-breadcrumb">
            <li><a href="#/product/list">{{'product' | translate}}{{'List'| translate}}</a></li>
            <li class="active">{{product.pid?'edit':'add_new' | translate}}</li>
        </ul>
        <div class="control-group" ng-if="product.pid">
            <label class="control-label v-top"><b style="color: #f00;">*</b> {{'productid' | translate}}:</label>
            <div class="controls">
                {{product.pid}}
            </div>
        </div>
        <div class="control-group">
            <label class="control-label v-top"><b style="color: #f00;">*</b> {{'outer_id' | translate}} :</label>
            <div class="controls">
                <input type="text" name="outer_id" ng-model="product.outer_id" class="input-xlarge">
                <div ng-show="productForm.outer_id.$error.required" class="sui-msg msg-error msg-clear help-block">
                    <div class="msg-con">{{'required'| translate}}</div>
                    <s class="msg-icon"></s>
                </div>
            </div>
        </div>
        <div class="control-group">
            <label class="control-label v-top"><b style="color: #f00;">*</b> {{'Category'| translate}}：</label>
            <div class="controls">
                <div class="zTreeDemoBackground">
                    <cat-tree ng-model="product.category_id" dft="1"></cat-tree>
                </div>
                <div ng-show="!product.category_id" class="sui-msg msg-error msg-clear help-block error">
                    <div class="msg-con">{{'required'| translate}}</div>
                    <s class="msg-icon"></s>
                </div>
            </div>
        </div>
        <div class="control-group">
            <label class="control-label v-top"><b style="color: #f00;">*</b> {{'产品线' | translate}} :</label>
            <div class="controls">
                <select-productcat ng-model="product.productcat_id" rtype="1" callback="addproductcat(productcat)"></select-productcat>
                <input type="hidden" name="productcat_id" ng-model="product.productcat_id">
                <div ng-show="productForm.productcat_id.$error.required" class="sui-msg msg-error msg-clear help-block">
                    <div class="msg-con">{{'required'| translate}}</div>
                    <s class="msg-icon"></s>
                </div>
            </div>
        </div>
        <div class="control-group">
            <label class="control-label v-top"><b style="color: #f00;">*</b> {{'discount' | translate}} :</label>
            <div class="controls">
                <input type="number" name="discount_id" ng-model="product.discount_id" class="input-xlarge" />
                <div ng-show="productForm.discount_id.$error.required" class="sui-msg msg-error msg-clear help-block">
                    <div class="msg-con">{{'required'| translate}}</div>
                    <s class="msg-icon"></s>
                </div>
            </div>
        </div>
        <div class="control-group">
            <label class="control-label v-top"><b style="color: #f00;">*</b> {{'have_guarantee' | translate}} :</label>
            <div class="controls">
                <label class="checkbox-pretty inline " ng-class="{true:'checked'} [product.have_guarantee]">
                    <input type="checkbox" name="have_guarantee" ng-model="product.have_guarantee" /><span></span>
                </label>
                <div ng-show="productForm.have_guarantee.$error.required" class="sui-msg msg-error msg-clear help-block">
                    <div class="msg-con">{{'required'| translate}}</div>
                    <s class="msg-icon"></s>
                </div>
            </div>
        </div>
        <div class="control-group">
            <label class="control-label v-top"><b style="color: #f00;">*</b> {{'have_invoice' | translate}} :</label>
            <div class="controls">
                <label class="checkbox-pretty inline " ng-class="{true:'checked'} [product.have_invoice]">
                    <input type="checkbox" name="have_invoice" ng-model="product.have_invoice" /><span></span>
                </label>
                <div ng-show="productForm.have_invoice.$error.required" class="sui-msg msg-error msg-clear help-block">
                    <div class="msg-con">{{'required'| translate}}</div>
                    <s class="msg-icon"></s>
                </div>
            </div>
        </div>
        <div class="control-group">
            <label class="control-label v-top"><b style="color: #f00;">*</b> {{'product_image'| translate}}：</label>
            <div class="controls">
                <div>
                    <img ng-src="{{product.image_url}}" class="item-image">
                    <br>
                    <attachment owner-id="product.pid ?product.pid:1" owner-type="product" dhf-ng-model="product.image_url" xtype="url" mult="false" title="Upload" use-type="png,jpeg,gif,jpg,JPG,PNG,JPEG,GIF"></attachment>
                </div>
                <div>
                    <input ng-model="product.image_url" type="hidden" value="" name="image_url" class="input-xlarge" required>
                </div>
                <div ng-show="productForm.image_url.$error.required" class="sui-msg msg-error msg-clear help-block error ">
                    <div class="msg-con">{{'required'| translate}}</div>
                    <s class="msg-icon"></s>
                </div>
            </div>
        </div>
        <div class="control-group">
            <label class="control-label v-top"><b style="color: #f00;">*</b> {{'description' | translate}} :</label>
            <div class="controls">
                <textarea name="description" ng-model="product.description" class="input-xlarge"></textarea>
                <div ng-show="productForm.description.$error.required" class="sui-msg msg-error msg-clear help-block">
                    <div class="msg-con">{{'required'| translate}}</div>
                    <s class="msg-icon"></s>
                </div>
            </div>
        </div>
        <div class="control-group" ng-hide="true">
            <label class="control-label v-top"><b style="color: #f00;">*</b> {{'have_invoice' | translate}} :</label>
            <div>
                <img ng-src="{{item.pic_url}}" class="item-image">
                <br>
                <attachment owner-id="item.item_id ?item.item_id:1" owner-type="item" dhf-ng-model="item.pic_url" xtype="url" mult="false" title="Upload" use-type="png,jpeg,gif,jpg,JPG,PNG,JPEG,GIF"></attachment>
            </div>
            <div class="control-group">
                <div ng-show="productForm.have_invoice.$error.required" class="sui-msg msg-error msg-clear help-block">
                    <div class="msg-con">{{'required'| translate}}</div>
                    <s class="msg-icon"></s>
                </div>
            </div>
        </div>
        <div class="control-group">
            <label class="control-label v-top"><b style="color: #f00;">*</b> {{'Name' | translate}} :</label>
            <div class="controls">
                <input type="text" name="name" ng-model="product.name" class="input-xlarge">
                <div ng-show="productForm.have_invoice.$error.required" class="sui-msg msg-error msg-clear help-block">
                    <div class="msg-con">{{'required'| translate}}</div>
                    <s class="msg-icon"></s>
                </div>
            </div>
        </div>
        <!--     <div class="control-group" class="hide">
            <div class="controls">
                <input type="hidden" ng-model="product.outer_id" name="outer_id" class="input-xlarge">
            </div>
        </div> -->
        <!--     <div class="control-group" class="hide">
            <label class="control-label v-top"><b style="color: #f00;">*</b> {{'Name' | translate}} :</label>
            <div class="controls">
                <input type="text" name="items_count" ng-model="product.items_count" class="input-xlarge">
              
                <div ng-show="productForm.have_invoice.$error.required" class="sui-msg msg-error msg-clear help-block">
                    <div class="msg-con">{{'required'| translate}}</div>
                    <s class="msg-icon"></s>
                </div>
            </div>
        </div> -->
        <!--        <div class="control-group" class="hide">
            <label class="control-label v-top"><b style="color: #f00;">*</b> {{'orders_count' | translate}} :</label>
            <div class="controls">
                <input type="text" name="orders_count" ng-model="product.orders_count" class="input-xlarge">
              
                <div ng-show="productForm.orders_count.$error.required" class="sui-msg msg-error msg-clear help-block">
                    <div class="msg-con">{{'required'| translate}}</div>
                    <s class="msg-icon"></s>
                </div>
            </div>
        </div> -->
        <div class="control-group">
            <label class="control-label v-top"><b style="color: #f00;">*</b> {{'postage_fast' | translate}} :</label>
            <div class="controls">
                <select-faretemplate ng-model="product.postage_id" callback="setpostage_id(fareTemplate)"></select-faretemplate>
                <div ng-show="productForm.postage_fast.$error.required" class="sui-msg msg-error msg-clear help-block">
                    <div class="msg-con">{{'required'| translate}}</div>
                    <s class="msg-icon"></s>
                </div>
            </div>
        </div>
        <div class="control-group" class="hide">
            <label class="control-label v-top"><b style="color: #f00;">*</b> {{'postage_fast' | translate}} :</label>
            <div class="controls">
                <input type="text" name="postage_fast" ng-model="product.postage_fast" class="input-xlarge">
                <div ng-show="productForm.postage_fast.$error.required" class="sui-msg msg-error msg-clear help-block">
                    <div class="msg-con">{{'required'| translate}}</div>
                    <s class="msg-icon"></s>
                </div>
            </div>
        </div>
        <div class="control-group" class="hide">
            <label class="control-label v-top"><b style="color: #f00;">*</b> {{'postage_type' | translate}} :</label>
            <div class="controls">
                <postage-type ng-model="product.postage_type"></postage-type>
                <div ng-show="productForm.postage_type.$error.required" class="sui-msg msg-error msg-clear help-block">
                    <div class="msg-con">{{'required'| translate}}</div>
                    <s class="msg-icon"></s>
                </div>
            </div>
        </div>
        <div class="control-group" class="hide">
            <label class="control-label v-top"><b style="color: #f00;">*</b> {{'quantity' | translate}} :</label>
            <div class="controls">
                <input type="number" name="quantity" ng-model="product.quantity" class="input-xlarge">
                <div ng-show="productForm.quantity.$error.required" class="sui-msg msg-error msg-clear help-block">
                    <div class="msg-con">{{'required'| translate}}</div>
                    <s class="msg-icon"></s>
                </div>
            </div>
        </div>
        <div class="control-group" class="hide">
            <label class="control-label v-top"><b style="color: #f00;">*</b> {{'alarm_number' | translate}} :</label>
            <div class="controls">
                <input type="number" name="alarm_number" ng-model="product.alarm_number" class="input-xlarge">
                <div ng-show="productForm.alarm_number.$error.required" class="sui-msg msg-error msg-clear help-block">
                    <div class="msg-con">{{'required'| translate}}</div>
                    <s class="msg-icon"></s>
                </div>
            </div>
        </div>
        <div class="control-group">
            <label class="control-label v-top"><b style="color: #f00;">*</b> {{'product_skus' | translate}} :</label>
            <div class="controls">
                <!-- <a href="javascript:;" class="sui-btn btn-success btn-small ng-binding" ng-click="addSku(sku);">+增加规格</a> -->
                <a href="javascript:;" class="sui-btn btn-success btn-small" ng-click="addNewSku(sku);">+{{'skus_add'|translate}}</a>
                <div ng-show="skuNew" style="margin-top: 10px;margin-bottom:10px">
                    <div ng-repeat="(skey, sku) in skuNew" style="width:1028px;border:1px solid #EEEEEE;background:#F8F8F8;">
                        规格类型:
                        <input type="text" name="sku.name" ng-model="sku.name" ng-blur="addNskuName(sku.name,skey)" style="width:100px" required>
                        <button type="button" class="sui-btn btn-danger" ng-click="skuNew.splice($index,1)">{{'delete'|translate}}</button>
                        <div ng-show="sku.name" ng-repeat="(key, value) in sku.values " style="margin: 10px;">
                            <input type="checkbox" name="value.value" ng-checked="isSelected(value.value,sku.name)" ng-click="addNewSkuVaue(sku.name,value.value,$event,key,sku.pid)">
                            <input type="text" name="value.value" class="picker-text" ng-model="value.value" ng-blur="addNsku(sku.name,value.value,sku.pid,key)" placeholder="输入属性值" maxlength="30">
                        </div>
                    </div>
                </div>
                <table class="sui-table table-bordered" ng-show="product.skus" style="margin-bottom: 5px;">
                    <thead>
                        <th>
                            {{'Name'|translate}}
                        </th>
                        <th>
                            {{'outer_id'|translate}}
                        </th>
                        <th>
                            {{'image_url'|translate}}
                        </th>
                        <th>
                            {{'sku_properties'|translate}}
                        </th>
                        <th>
                            {{'pur_standard_price'|translate}}
                        </th>
                        <th>
                            {{'retail_standard_price'|translate}}
                        </th>
                        <th>
                            {{'retail_price_high'|translate}}
                        </th>
                        <th>
                            {{'retail_price_low'|translate}}
                        </th>
                        <th>
                            {{'quantity'|translate}}
                        </th>
                    </thead>
                    <tbody ng-repeat="sku in product.skus">
                        <td>
                            <input type="hidden" name="image_url" ng-model="sku.image_url">
                            <img ng-src="{{sku.image_url}}" class="item-image">
                            <br>
                            <attachment owner-id="sku.pid ?sku.pid:1" owner-type="sku" dhf-ng-model="sku.image_url" xtype="url" mult="false" title="Upload" use-type="png,jpeg,gif,jpg,JPG,PNG,JPEG,GIF"></attachment>
                        </td>
                        <td>
                            <input type="text" name="name" ng-model="sku.name">
                        </td>
                        <td>
                            <input type="text" name="outer_id" ng-model="sku.outer_id" style="width:100px">
                        </td>
                        <td>
                            {{sku.properties}}
                        </td>
                        <td>
                            <input type="number" name="pur_standard_price" smart-float ng-model="sku.pur_standard_price" style="width:50px">
                        </td>
                        <td>
                            <input type="number" name="retail_standard_price" smart-float ng-model="sku.retail_standard_price" style="width:50px">
                        </td>
                        <td>
                            <input type="number" name="retail_price_high" smart-float ng-model="sku.retail_price_high" style="width:50px">
                        </td>
                        <td>
                            <input type="number" name="retail_price_low" smart-float ng-model="sku.retail_price_low" style="width:50px">
                        </td>
                        <td>
                            <input type="number" name="quantity" ng-model="sku.quantity" style="width:50px">
                        </td>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="control-group">
            <label class="control-label"></label>
            <div class="controls">
                <button type="submit" id="submit" class="sui-btn btn-primary" ng-disabled="!productForm.$valid">
                    <span>{{'save'|translate}}</span>
                </button>
            </div>
        </div>
    </form>
</div>